<template>
    <fieldset>
        <legend>登陆页</legend>
        用户名：<input type="text" v-model="username">
        <br>
        密码：
        <input type="password" v-model="password" @keydown.enter="login">
        <button @click="login">登入</button>
    </fieldset>
</template>

<script setup>
import { ref } from 'vue';
import * as api from "../../api/users"
import {useRouter} from "vue-router"
//1.获取输入框中的用户名和密码
let username = ref('')
let password = ref('')

//2.发起请求,请求登入
let router =useRouter()
let login =async () => {
    let res = await api.loginApi(username.value, password.value)
    //服务器会返回token,这个token是个令牌,这个令牌需要保存在本地，
    // 后续请求的时候带上令牌,就能随意访问服务器的数据了工
        // 1，sessionStorage  2，localStorage
        if(res.data.token){
            sessionStorage.setItem('qf-token',res.data.token)
            router.push('/')
        }else{
            alert(res.data.msg)
        }

  console.log(res);

}

//3.判定请求成功和请求失败的情况



</script>